<template>
  <div>
    <div class="hotGoods">
      <img src="@/assets/binbing/homePageImg/listTitle.webp" />
    </div>
    <div class="hotGoods_top">
      <div class="hotGoods_top_left" @click="jumpproduct()">
        <!-- 小轮播图 -->
        <img src="@/assets/binbing/homePageImg/smallSlideshow01.webp" />
      </div>
      <div class="hotGoods_top_right">
        <div>
          <img src="@/assets/binbing/homePageImg/top_right_top.webp" />
        </div>
        <div>
          <img src="@/assets/binbing/homePageImg/top_right_btm.webp" />
        </div>
      </div>
    </div>
    <div class="hr-10"></div>
    <div class="hotGoods_btm">
      <div><img src="@/assets/binbing/homePageImg/hotGoods_btm01.webp" /></div>
      <div><img src="@/assets/binbing/homePageImg/hotGoods_btm02.webp" /></div>
      <div><img src="@/assets/binbing/homePageImg/hotGoods_btm03.webp" /></div>
      <div><img src="@/assets/binbing/homePageImg/hotGoods_btm04.webp" /></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "New",
  methods:{
   jumpproduct(){
    this.$router.push("/newproduct");
  }
}
};
  
</script>

<style scoped>
.hotGoods {
  height: 0.24rem;
  padding: 0.08rem 0.16rem;
}

.hotGoods > img {
  width: 1.41rem;
  height: 0.24rem;
}

.hotGoods_top,
.hotGoods_btm {
  height: 2.79rem;
  margin: 0 0.16rem;
  display: flex;
  justify-content: space-between;
}

.hotGoods_top_left,
.hotGoods_top_right {
  width: 1.86rem;
  height: 2.79rem;
}

.hotGoods_top_left {
  background-color: #fff;
  border-radius: 0.08rem;
  overflow: hidden;
}

.hotGoods_top_left img {
  width: 1.86rem;
}

.hotGoods_top_right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hotGoods_top_right > div {
  width: 1.86rem;
  height: 1.35rem;
  background-color: #fff;
  border-radius: 0.08rem;
  overflow: hidden;
}

.hotGoods_top_right > div > img {
  width: 1.86rem;
  height: 1.35rem;
}

.hotGoods_btm > div > img {
  width: 1.86rem;
  height: 1.35rem;
  display: block;
}

.hotGoods_btm > div {
  width: 1.86rem;
  height: 1.35rem;
  overflow: hidden;
  border-radius: 0.08rem;
}

.hotGoods_btm {
  flex-wrap: wrap;
  align-content: space-between;
}

.hr-10 {
	width: 100%;
	height: 0.1rem;
}
</style>